<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SQL Pretty Printer</title>
  <style>
  * {
    box-sizing: border-box;
  }

  body {
    font-family: Helvetica, Arial, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }

  h1 {
    color: #333;
    margin-bottom: 24px;
  }

  .container {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .field {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  label {
    font-weight: bold;
    color: #555;
  }

  textarea {
    width: 100%;
    min-height: 200px;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    font-family: monospace;
    resize: vertical;
  }

  textarea:focus {
    outline: none;
    border-color: #666;
  }

  .controls {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
  }

  .control-group {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
  }

  .copy-button {
    display: none;
    margin-top: 8px;
    padding: 8px 16px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
  }

  .copy-button:hover {
    background: #0056b3;
  }

  input[type="number"] {
    width: 60px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
  }

  input[type="checkbox"] {
    width: 16px;
    height: 16px;
  }
  </style>
</head>
<body>
  <h1>SQL Pretty Printer</h1>
  
  <div class="container">
    <div class="controls">
      <div class="control-group">
        <label for="dialect">Dialect:</label>
        <select id="dialect">
          <option value="sqlite">SQLite</option>
          <option value="sql">Standard SQL</option>
          <option value="postgresql">PostgreSQL</option>
          <option value="mysql">MySQL</option>
        </select>
      </div>

      <div class="control-group">
        <label for="tabWidth">Tab width:</label>
        <input type="number" id="tabWidth" value="2" min="1" max="8">
      </div>

      <div class="control-group">
        <label for="keywordCase">Keyword case:</label>
        <select id="keywordCase">
          <option value="preserve">preserve</option>
          <option value="upper">UPPER</option>
          <option value="lower">lower</option>
        </select>
      </div>

      <div class="control-group">
        <label for="indentStyle">Indent style:</label>
        <select id="indentStyle">
          <option value="standard">Standard</option>
          <option value="tabularLeft">Tabular (left)</option>
          <option value="tabularRight">Tabular (right)</option>
        </select>
      </div>
    </div>

    <div class="field">
      <label for="input">Input SQL:</label>
      <textarea id="input" spellcheck="false"></textarea>
    </div>

    <div class="field">
      <label for="output">Formatted SQL:</label>
      <textarea id="output" readonly spellcheck="false"></textarea>
    </div>
    
    <button class="copy-button">Copy to clipboard</button>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/sql-formatter/12.2.3/sql-formatter.min.js"></script>
  <script type="module">
const inputArea = document.getElementById('input')
const outputArea = document.getElementById('output')
const copyButton = document.querySelector('.copy-button')
const dialectSelect = document.getElementById('dialect')
const tabWidthInput = document.getElementById('tabWidth')
const uppercaseCheckbox = document.getElementById('uppercase')
const keywordCaseSelect = document.getElementById('keywordCase')
const indentStyleSelect = document.getElementById('indentStyle')

function formatSQL(sql) {
  if (!sql.trim()) return ''
  
  try {
    const options = {
      language: dialectSelect.value,
      tabWidth: parseInt(tabWidthInput.value, 10),
      keywordCase: keywordCaseSelect.value,
      indentStyle: indentStyleSelect.value
    }
    
    return sqlFormatter.format(sql, options)
  } catch (err) {
    return `Error formatting SQL: ${err.message}`
  }
}

function updateFormatting() {
  const formatted = formatSQL(inputArea.value)
  outputArea.value = formatted
  copyButton.style.display = formatted ? 'block' : 'none'
}

// Add event listeners to all controls
const controls = [
  inputArea, dialectSelect, tabWidthInput, 
  keywordCaseSelect, indentStyleSelect
]

controls.forEach(control => {
  control.addEventListener('input', updateFormatting)
  control.addEventListener('change', updateFormatting)
})

copyButton.addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText(outputArea.value)
    copyButton.textContent = 'Copied!'
    setTimeout(() => {
      copyButton.textContent = 'Copy to clipboard'
    }, 1500)
  } catch (err) {
    console.error('Failed to copy:', err)
  }
})
</script>
</body>
</html>
